<template>
  <view>
    <law-search-list style="z-index: 999;">
      <view class="search-content" slot="nav-center">
        <view class="input-search" :class="!getfouse?'':'yellowborder'">
          <u-input :clearable="true" v-model="searchValue" :focus="firstFocus" @focus="getfous()" @blur="getburl()" :placeholder="searchplaceValue" :placeholderStyle="placeholderStyle"/>
        </view>
        <view class="search-right" @click="searchList()">
          搜索
        </view>
      </view>
    </law-search-list>
    <view class="search-history" v-if="isShowHistory&&historyList.length>0">
      <view class="search-history-title">搜索历史</view>
      <view class="search-history-content">
        <view class="search-history-item" v-for="(item,index) in historyList" v-if="!isShowallHistory?index<3:index<9"  @click="searchone(item)"  @longtap="longpress">
          {{item}}
          <view class="closed" v-if="is_delet" @click.stop="deleteSearchHis(item)"><image src="@/static/img/close.png"></image></view>
        </view>
      </view>
      <view class="lookmore" @click="changeShowHistory()" v-if="historyList.length>3">
        <view class="lookmores">{{ !isShowallHistory?'展示更多':'收起' }}</view>
        <view class="icon_arrow" :class="!isShowallHistory?'':'rolate180'"><image src="@/static/img/downarrow@2x.png"  mode="aspectFit"></image></view>
      </view>
    </view>
    <view class="content" :style="{'margin-top':isShowHistory&&historyList.length>0?'0':'88rpx'}">
      <waterfall @loadmore="loadData()" :col="col" :data="dataList" :gutterWidth="gutterWidth" :width="itemWidth">
        <template>
          <div class="cell-item" v-for="(item, index) in dataList" @click="navTo(item)">
            <view class="item-img" @click.stop="previewImage(item)">
              <image v-if="item.product_image" :src="item.product_image" alt="加载错误" mode="widthFix">
              </image>
              <view class="address">
                <view class="address-v">
                  <view class="year-icon">
                    <image src="../../../static/img/year.png" class="" mode=""></image>
                  </view>
                  <view class="year-name" v-if="item.serve_name != '全部'" style="margin-left: 10rpx">
                    {{ item.serve_name }}
                  </view>
                  <view class="year-names" v-if="item.serve_name == '全部'" style="margin-left: 10rpx">
                    {{ item.serve_name }}
                  </view>
                </view>
                <view class="address-v">
                  <view class="address-icon">
                    <image src="../../../static/img/addresss.png" class="" mode=""></image>
                  </view>
                  <view class="address-name" style="margin-left: 10rpx">{{
                      item.profession
                    }}</view>
                </view>
              </view>
            </view>
            <view class="item-txt u-p-l-12 u-p-r-12">
              <law-product-intror-nopay2 :item="item"></law-product-intror-nopay2>
              <!-- 服务保障 -->
              <view class="item-tag text-ellipsis" style="    display: flex;">
                <view class="tag-txt tag-txt-small" :class="small ? 'label-txt-anzhuo-small' : ''"  v-for="(item_tag, index_tag) in item.tags" :key="index_tag">
                  {{ item_tag }}
                </view>
              </view>
              <!-- 价格 -->
              <view class="item-money">
                <view class="item-give" :class="String(item.product_money).indexOf('*') > 0||item.price_type=='先用后付 无忧付'||String(item.product_money).indexOf('(投资人支付') > 0?'item-gives':''">
                  <text v-if="(String(item.product_money).indexOf('*') > 0||item.price_type=='先用后付 无忧付')&& String(item.product_money).indexOf('(投资人支付') < 0" :style="
                      String(item.product_huaxian_money).indexOf('(') > 0 ||
                      String(item.product_huaxian_money).indexOf('随缘') > -1 ||
                      String(item.product_money).indexOf('*') > 0
                        ? 'margin-right: 0;display:block; position:relative'
                        : 'margin-right: 16rpx;; position:relative'
                    ">
                    <text class="item-fuhao">¥</text>
                    <block v-if="String(item.product_money).indexOf('*') > 0">
                      <text class="item-yuanshi">{{ item.product_money.split("*")[0] }}</text>
                      <text class="item-fq"  style="top: 1px" >x{{ item.product_money.split("*")[1] }}</text>
                    </block>
                    <block v-else>
                      <text class="item-yuanshi">{{item.product_money}}</text>
                      <text class="textnormal item-fq tops_10"  :style="small ?'top:1px':'top: 2px'" :class="small ? 'xia_as' : 'xia_bs'">
                        (先用后付)
                      </text>
                    </block>
                  </text>
                  <view v-else-if="
                      String(item.product_money).indexOf('(投资人支付') > 0
                    " :style="
                      String(item.product_huaxian_money).indexOf('(') > 0 ||
                      String(item.product_huaxian_money).indexOf('随缘') > -1 ||
                      String(item.product_money).indexOf('*') > 0
                        ? 'margin-right: 0;display:flex; position:relative'
                        : 'margin-right: 16rpx; position:relative'
                    ">
                    <view>
                      <text class="item-fuhao">¥</text>
                      <text class="item-yuanshi">{{
                          item.product_money.split("(投资人支付")[0]
                        }}</text>
                      <text class="textnormal item-fq"
                            :style="small ?'top: 6rpx;right:-134rpx':'top: 6rpx;right:-118rpx'"
                            :class="small ?'xia_as' : 'xia_bs'">(投资人支付)</text>
                    </view>
                  </view>
                  <text v-else :style="
                      String(item.product_huaxian_money).indexOf('(') > 0 ||
                      String(item.product_huaxian_money).indexOf('随缘') > -1 ||
                      String(item.product_money).indexOf('*') > 0
                        ? 'margin-right: 0;display:block; position:relative'
                        : 'margin-right: 16rpx; position:relative'
                    ">
                    <text class="item-fuhao">¥</text>
                    <text class="item-yuanshi">{{ item.product_money }}</text>
                  </text>
                  <template v-if="
                      item.product_huaxian_money &&
                      ((item.product_name == '问一下'&&item.serve_time!='15分钟')||item.product_name != '问一下') &&
                      item.offer != '47'
                    ">
                    <text style="margin-left: 0; display: inline-block; position:relative"
                          v-if="String(item.product_huaxian_money).indexOf('(') > 0"
                          class="coupon-prize line_through">
                      <text  class="item-fq">{{"¥" + String(item.product_huaxian_money).slice(
                          0,
                          String(item.product_huaxian_money).indexOf("(")
                      )}}</text>
                      <text class="teshus item-fq" :style="small ? 'top:-1px':'top:-2px'"  :class="small ? 'xia_a' : 'xia_b'">
                        (投资人支付)
                      </text>
                    </text>
                    <text style="margin-left: 0; position:relative" v-else-if="(String(item.product_huaxian_money).indexOf('*') > 0||item.price_type=='先用后付 无忧付')&& String(item.product_huaxian_money).indexOf('(投资人支付') < 0"
                          class="coupon-prize line_through">
                      <block v-if="String(item.product_huaxian_money).indexOf('*') > 0">
                        <text  class="item-fq">{{"¥" + item.product_huaxian_money.split("*")[0] }}</text>
                        <text class="item-fq" :class="small ? 'xia_a' : 'xia_b'" :style="small ?'margin-right: 4rpx;top: 2rpx':'margin-right: 4rpx;top: 0px'">x{{ item.product_huaxian_money.split("*")[1] }}</text>
                      </block>
                      <block v-else><text class="item-fq">{{"¥" +item.product_huaxian_money}}</text><text class="tops_10 teshus item-fq" :class="small ? 'xia_a' : 'xia_b'"  style="top: -1px" >
                        (先用后付)
                      </text></block></text>
                    <text style="margin-left: 0 ; position:relative" v-else class="coupon-prize line_through">{{ "¥" + item.product_huaxian_money }}</text>
                  </template>
                </view>
                <view class="money-right gray">
                  <view class="money-num">已售{{ item.sale }}</view>
                </view>
              </view>

              <!-- 标题 -->
              <!--						<view-->
              <!--							class="item-title"-->
              <!--							@click.stop="-->
              <!--								item.isEllipsis = !item.isEllipsis;-->
              <!--								copy(item);-->
              <!--							"-->
              <!--						>-->
              <!--							<image class="title-image" src="@/static/img/product-title.png" mode="widthFix"></image>-->
              <!--							<view class="title-txt" :class="{ 'txt-one-list': item.isEllipsis == true }">{{ item.title }}</view>-->
              <!--							<view class="title-arrow" :class="{ rotate: item.isEllipsis == true }" v-if="item.title && item.title.replace(/[\u0391-\uFFE5]/g, 'aa').length > 14">-->
              <!--								<image src="@/static/img/order-top-arrow.png" mode="aspectFit"></image>-->
              <!--							</view>-->
              <!--						</view>-->
            </view>
          </div>
        </template>
      </waterfall>
      <uni-load-more :status="loadingType" :contentText="{
          contentdown: '',
          contentrefresh: '正在加载...',
          contentnomore: '法力 守护美好生活',
        }"></uni-load-more>
        <view class="nodata" v-if="dataList.length==0&&!loading" style="text-align: center;color:#ccc">暂无产品，请换一个关键字搜索~</view>
      <!-- 全局通用组件 -->
      <law-common ref="lawCommon"></law-common>
    </view>
  </view>
</template>

<script>
import uniCopy from "@/common/utils/js_sdk/xb-copy/uni-copy.js";
import $ from "jquery";
export default {
  data() {
    return {
      firstFocus:false,
      info: {},
      type_index: 0,
      type_sec_index: 0,
      typeInfo: {},
      typeParams: {},
      dataList: [],
      col: 2,
      page: 1,
      loadingType: "more", //加载更多状态
      searchBarFixed: false,
      product_id: "",
      autoplay: true,
      playState: "play",
      indicatorDots: true,
      interval: 5000,
      duration: 800,
      bannerList: [],
      product_name: "",
      product_nameindex: "",
      pay_type: "",
      pay_typeindex: "",
      order: "",
      orderindex: "",
      server_id: "",
      select_type: "",
      server_idindex: "",
      small: false,
      searchValue:"",
      searchplaceValue:"请输入想查询的产品",
      placeholderStyle:"padding:14rpx;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;width: 96%",
      isShowallHistory:false,
      isShowHistory:false,
      getfouse:false,
      issearch:true,
      historyList:[],
      search_val:'',
      intro:'',
      loading:false,
      searchArr:[
        {
          "name": "咨询小问题、简单问题，点问一下，选15分钟",
          "id": "ss1"
        },
        {
          "name": "咨询官司能否打赢，点问一下，选包月",
          "id": "ss2"
        },
        {
          "name": "外出办事，要律师帮您防坑防骗壮声势，点陪同办",
          "id": "ss3"
        },
        {
          "name": "人家告您，要律师帮您打赢或减少赔偿，点打官司",
          "id": "ss4"
        },
        {
          "name": "您告人家，要律师帮您打赢、回款，点打官司",
          "id": "ss5"
        },
        {
          "name": "亲朋好友被抓，要律师带话、取保，点刑事会见",
          "id": "ss6"
        }
      ],
      is_delet:false
    };
  },
  onShow() {
    uni.removeStorageSync('forwardLocation')
    $(document.body).css({'background-color':'#fafcfa'})
    this.gettopNewColor();
    this.page = 1
    this.init();
  },
  created() {
    const nav = navigator.userAgent;
    if (nav.indexOf("Android") > -1 || nav.indexOf("Adr") > -1) {
      this.small = true;
    } else if (!!nav.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)) {
      this.is_anzhuo = false;
    }
  },
  onLoad(params) {
    console.log("=====parmas",params)
      this.product_id = 6;
      this.select_type = "product";
      this.intro = params.searchId;
      if(params.searchValuePlaceholder&&params.searchId!='ss7'){
        this.searchplaceValue = params.searchValuePlaceholder
      }else if(params.searchId!='ss7'){
        this.searchplaceValue =JSON.parse(JSON.stringify(params.searchValue))
      }
      this.searchValue = params.searchValue;
      if( this.searchValue || this.searchplaceValue!=this.searchValue){
        this.issearch = true
        this.getfouse = true
        this.firstFocus = true
      }
      console.log("==this.searchValue",this.searchValue)
      // this.server_idindex =  params.id; // 从导航进入时点击领域的时候默认回显导航的值
      this.init();
  },
  watch: {
    searchValue(val, oldVal){
      console.log("======val",val)
      if(val==''){
        this.issearch = false
      }
      let ret = this.searchArr.findIndex((v) => {
        return v.name == val;
      });
      if(ret!='-1'){
        this.search_val = null
        this.intro = 'ss'+String(ret+1)
      }else{
        this.search_val = val
        this.intro = null
      }
      if(val=='' || !this.issearch){
        this.isShowHistory = true
      }else{
        this.isShowHistory = false
      }
      console.log("=======this.search_val ",this.search_val )
    },
    issearch(val){
      if(val == false){
        this.isShowHistory = true
      }else{
        this.isShowHistory = false
      }
    },
    type_index(val, oldVal) {
      if (val == "0") {
        if (this.product_nameindex) {
          this.type_sec_index = this.product_nameindex;
        } else {
          this.type_sec_index = 0;
        }
      } else if (val == "1") {
        if (this.pay_typeindex) {
          this.type_sec_index = this.pay_typeindex;
        } else {
          this.type_sec_index = 0;
        }
      } else if (val == "2") {
        if (this.orderindex) {
          this.type_sec_index = this.orderindex;
        } else {
          this.type_sec_index = 0;
        }
      } else if (val == "3") {
        if (this.server_idindex) {
          this.type_sec_index = this.server_idindex;
        } else {
          this.type_sec_index = 0;
        }
      }
    },
    type_sec_index(val, oldVal) {
      if (this.type_index == "0") {
        this.product_nameindex = val;
        this.product_name = this.typeInfo[0].value[val].id;
      } else if (this.type_index == "1") {
        this.pay_typeindex = val;
        this.pay_type = this.typeInfo[1].value[val].id;
      } else if (this.type_index == "2") {
        this.orderindex = val;
        this.order = this.typeInfo[2].value[val].id;
      } else if (this.type_index == "3") {
        this.server_idindex = val;
        if (this.select_type == "serve") {
          this.product_id = this.typeInfo[3].value[val].id;
        } else {
          this.server_id = this.typeInfo[3].value[val].id;
        }
      }
      console.log("========this.order", val, oldVal, this.type_index);
      this.typeParams = {
        product_name: this.product_name, //执业年限
        select_type: this.select_type, //筛选类型
        pay_type: this.pay_type, //付款时间
        order: this.order, //价格高低
        server_id: this.server_id, //服务领域
        key:this.search_val,
        // id: this.product_id, //价格高低
      };
      // if (this.product_id) {
      // 	this.typeParams = {
      // 		...this.typeParams,
      // 		id: this.product_id,
      // 		server_id: this.server_id //服务领域
      // 	};
      // }
      if (this.server_id) {
        this.typeParams = {
          ...this.typeParams,
          // server_id: this.server_id,
          // id: this.product_id,//服务领域
          type: 2,
        };
      }
      this.loadData("refresh");
    },
  },
  computed: {
    itemWidth() {
      return 345 * 0.5 * (document.documentElement.clientWidth / 375); //#rem布局 计算宽度
    },
    gutterWidth() {
      return 20 * 0.5 * (document.documentElement.clientWidth /
          375); //#rem布局 计算x轴方向margin(y轴方向的margin自定义在css中即可)
    },
  },
  onReady() {
    console.log("onReady");
    window.addEventListener("scroll", this.handleScroll);
  },
  onHide() {
    $(document.body).css({'background-color':'#f6f6f6'})
    console.log("onHide");
  },
  methods: {
    searchone(item){
      this.searchValue = item
      this.search_val = item
      this.issearch = true
      this.getfouse = true
      this.isShowHistory = false
      this.loadData("refresh");
    },
    longpress(){
      this.is_delet = true
      console.log("=======")
    },
    async deleteSearchHis(item){
      let formData = {
        str:item,
        token:uni.getStorageSync('token')
      }
      let res = await this.$api("index.searchUpdate", formData);
      if (res.code == 1) {
        this.historyList = res.data
      }

    },
    getfous(){
      this.getfouse = true
      this.firstFocus = true
    },
    getburl(){
      this.getfouse = false;
      this.firstFocus = false;
      setTimeout(()=>{
        this.loadData("refresh");
      },100)
    },
    searchList(){
      if(!this.searchValue){
        this.searchValue = JSON.parse(JSON.stringify(this.searchplaceValue))
      }
      this.getfouse= true
      this.issearch = true
      this.loadData("refresh");
    },
    changeShowHistory(){
      this.isShowallHistory = !this.isShowallHistory
    },
    change() {
      this.playState = "puse";
    },
    getHeight() {
      //   console.log("============",this.$refs.imgsdom[0].$el.clientHeight)
    },
    async init() {
      let formData = {};
      if (this.product_id) {
        formData = {
          product_id: this.product_id,
        };
      }
      if (this.server_id) {
        formData = {
          server_id: this.server_id,
        };
      }
      let res = await this.$api("index.selects", formData);
      this.typeInfo = res.data;
      this.type_sec_index = 0;
      this.typeParams = {
        key:this.search_val,
        select_type: this.select_type, //筛选类型
        product_name: this.typeInfo[0].value[0].id, //执业年限
        pay_type: this.typeInfo[1].value[0].id, //付款时间
        order: this.typeInfo[2].value[0].id, //价格高低
      };
      if (this.product_id) {
        this.typeParams = {
          ...this.typeParams,
          id: this.product_id,
          // server_id:this.product_id //修改的  有问题 因为index值和分类里面的具体个数对不上。
          // server_id: this.typeInfo[3].value[0].id//之前的
        };
      }
      if (this.server_id) {
        this.typeParams = {
          ...this.typeParams,
          server_id: this.server_id,
          // id:  this.typeInfo[3].value[0].id,//之前的
          // id:this.server_id,//修改的  有问题 因为index值和分类里面的具体个数对不上。
          type: 2,
        };
      }
      console.log("========this.server_id", this.typeInfo[3], this.typeInfo);
      this.loadData("refresh");
    },
    //带下拉刷新和上滑加载
    async loadData(type = "add", loading) {
      this.loading = true
      if (type === "add") {
        if (this.loadingType === "nomore") {
          return;
        }
        this.loadingType = "loading";
      } else if (type === "refresh") {
        this.loadingType = "loading";
        this.page = 1;
        this.dataList = [];
      } else {
        this.loadingType = "more";
      }
      let formData = {}
      if(this.intro){
        formData = {
          page: this.page,
          intro:this.intro,
          token:uni.getStorageSync('token')
        };
      }
      if(this.search_val||this.search_val==''){
        formData = {
          page: this.page,
          key:this.search_val,
          token:uni.getStorageSync('token')
        };
      }
      console.log("===typeParams",formData)
      let res = await this.$api("index.search", formData);
      if (res.code == 1) {
        if (this.page == 1) {
          this.info = res.data;
          uni.setNavigationBarTitle({
            title: res.data.title,
          });
        }
        let dataList = res.data.server;
        dataList.forEach((item) => {
          this.$set(item, "isEllipsis", true);
        });
        this.historyList = []
        this.historyList = res.data.sh
        console.log("=====this.historyList",this.historyList)
        this.page++;
        this.dataList = this.dataList.concat(dataList);
        this.loadingType =
            res.data.server.current_page >= res.data.server.total_page ?
                "nomore" :
                "more";
        this.bannerList = res.data.banner_list;
        setTimeout(() => {
          this.getHeight();
          this.loading = false
        }, 1000);
      }
    },
    navTo(item) {
      let url = "";

      let params = {
        product_id: item.product_price_id,
        product_name: item.product_name,
        area_id: item.id,
        sale: item.sale,
        serve_name_text: item.serve_name_text,
        price_type_text: item.price_type,
        product_price_id: item.product_price_id,
      };
      /* if(item.money_type_text=='投资人支付(不用还)'){
        if(item.profession == '深圳'){
          item.profession = '广东省深圳市';
        }else{
          item.profession = '广东省广州市';
        }
        params = {
          ...params,
          profession2: item.profession
        };
      } */
      if (item.product_name == "问一下") {
        url = "/pages/client/order/order-ask";
      } else if (item.product_name == "写合同") {
        url = "/pages/client/order/order-write";
      } else if (item.product_name == "陪同办") {
        url = "/pages/client/order/order-chat";
      } else if (item.product_name == "私人律师") {
        url = "/pages/client/order/order-butler";
      } else if (item.product_name == "审案子") {
        url = "/pages/client/order/order-decide";
      } else if (item.product_name == "打官司") {
        if (item.money_type == 26) {
          params = {
            ...params,
            bearFees: "投资人支付(不用还)",
          };
        } else if (item.money_type == 27) {
          params = {
            ...params,
            bearFees: "自费",
          };
        }
        url = "/pages/client/order/order-court-own";
      } else if (item.product_name == "刑事会见") {
        url = "/pages/client/order/order-criminal";
      }
      this.jump(url, params);
    },
    previewImage(item) {
      let previewImages = [];
      let obj = {
        userId: "1234",
        headIcon: "",
        nickname: "风骚女子",
        picURL: item.product_image_max,
        content: item.title,
      };
      previewImages.push(obj);
      this.newPreviewImages(previewImages);
    },
    copy(item) {
      if (!item.isEllipsis) {
        return;
      }
      let copyInfo = item.title;
      uniCopy({
        content: copyInfo,
        success: (res) => {
          uni.showToast({
            title: res,
            icon: "none",
          });
        },
        error: (e) => {
          uni.showToast({
            title: e,
            icon: "none",
            duration: 3000,
          });
        },
      });
    },
    handleScroll() {
      console.log("scroll");
      var scrollTop =
          window.pageYOffset ||
          document.documentElement.scrollTop ||
          document.body.scrollTop;
      if (document.querySelector("#product-type-box")) {
        var offsetTop = document.querySelector("#product-type-box").offsetTop;
        if (scrollTop > offsetTop) {
          this.searchBarFixed = true;
        } else {
          this.searchBarFixed = false;
        }
      }
    },
    gettopNewColor(){
      const nav = navigator.userAgent;
      if (nav.indexOf('Android') > -1 || nav.indexOf('Adr') > -1) {
        phone.HomeMainPageBackgroundColorChange("#fafcfa")
      } else if (!!nav.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)) {
        this.$bridge.callhandler('HomeMainPageBackgroundColorChange', {topColor:'#fafcfa',bottomColor:"#fafcfa"}, res => {});
      }
    },
  },
  //加载更多
  onReachBottom() {
    if(this.dataList.length>0){
      this.loadData();
    }
  },
};
</script>

<style lang="scss">
page{
  background: #fafafa;
  height: calc(100% - 94rpx);
}
.content {
  padding: 40rpx 20rpx 0;
  -webkit-text-size-adjust: none;
}

// 瀑布流
::v-deep .vue-waterfall-column {
  float: left;
}

.cell-item {
  overflow: hidden;
  box-sizing: border-box;
  margin-bottom: 20rpx;
}

.item-img {
  height: 400rpx;
  overflow: hidden;
  position: relative;

  image {
    width: 100%;
    height: 100%;
  }
}

.item-txt {
  padding:0 12rpx;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-width: 0;

  .item-money {
    //margin: 0 0 14rpx 0;
    display: flex;
    display: box;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    justify-content: space-between;

    .money-right {
      // min-width: 100rpx;
      display: flex;
      display: box;
      display: -webkit-box;
      display: -moz-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      align-items: center;

      image {
        width: 30rpx;
        height: 30rpx;
      }

      .money-num {
        font-size: 20rpx;
        margin-left: 6rpx;
        min-width: 100rpx;
        text-align: right;
      }
    }
  }

  .item-title {
    padding-top: 4rpx;
    display: flex;

    .title-image {
      margin-top: 4rpx;
      width: 40rpx;
      height: 40rpx;
      margin-right: 10rpx;
    }

    .title-txt {
      color: #aaa;
      font-size: 20rpx;
      flex: 1;
      line-height: 50rpx;
    }

    .title-arrow {
      padding-left: 10rpx;
      width: 26rpx;
      height: 50rpx;
      display: flex;
      align-items: center;

      image {
        width: 100%;
      }

      &.rotate {
        image {
          transform: rotate(180deg);
        }
      }
    }
  }

  .item-tip {
    //font-size: 24rpx;
    margin-bottom: 10rpx;

    .tip-item {
      margin-right: 10rpx;
    }
  }

  .item-tag {
    //margin-bottom: 4rpx;
    &.text-ellipsis {
      color: #aaa;
    }
    .tag-txt {
      color: #aaa;
      font-size: 28rpx;
    }
    .tag-txt-small {
      color: #333;
      transform: scale(0.75);
      transform-origin: 0 0;
      margin-left: -40rpx;
      &:first-child{
        margin-left: 0rpx;
      }
    }
    .label-txt-anzhuo-small {
      font-size: 28rpx;
      transform: scale(0.7) !important;
      transform-origin: 0 0;
    }
  }

  .item-give {
    color: #FF7521;
    font-size: 28rpx;
    font-weight: bold;
  }
  .item-gives{
    display: flex;
    flex-direction: column;
  }
  .item-fuhao {
    font-size: 24rpx;
  }

  .item-fq {
    font-size: 22rpx;
    margin-right: 4rpx;
  }
  .item-yuanshi{
    font-size: 30rpx;
    margin-right: 6rpx;
  }
}

.txt-one-list {
  height: 50rpx;
  overflow: hidden;
}

.banner {
  .image-wrapper {
    width: 100%;
    overflow: hidden;

    image {
      width: 100%;
      display: block;
    }
  }
}

.product-type-box {
  background-color: #fafafa;
  margin-bottom: 20rpx;
  display: flex;
  flex-wrap: wrap;

  .type-item {
    flex: 1;

    .item-txt {
      color: #aaa;
      font-size: 34rpx;
      position: relative;
      line-height: 50rpx;
      text-align: center;
      font-weight: bold;
    }

    &.active {
      .item-txt {
        color: #333;

        &::before {
          content: "";
          position: absolute;
          background-color: $uni-color-primary;
          width: 50rpx;
          height: 8rpx;
          border-radius: 8rpx;
          bottom: -10rpx;
          left: 50%;
          transform: translate(-50%, 0);
        }
      }
    }
  }

  .secend-item {
    white-space: nowrap;
    margin-top: 20rpx;
    padding-bottom: 10rpx;

    .second-txt {
      display: inline-block;
      margin-right: 15rpx;
      background-color: #ffffff;
      border-radius: 10rpx;
      text-align: center;
      padding: 10rpx;
      color: #aaaaaa;
      border: 1rpx solid #ffffff;

      &.active {
        color: $uni-color-primary;
        border: 1rpx solid $uni-color-primary;
      }
    }
  }
}

.fixed-top.product-type-box {
  width: 100%;
  position: fixed;
  top: 86rpx;
  left: 0;
  z-index: 999;
  padding: 20rpx;
}

.address {
  width: 346rpx;
  height: 42rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-left: 16rpx;
  padding-right: 16rpx;
  position: absolute;
  bottom: 0rpx;
  left: 0rpx;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1));
}

.address-v {
  width: 90rpx;
  height: 42rpx;
  display: flex;
  align-items: center;
}

.year-icon {
  width: 29rpx;
  height: 29rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.year-icon image {
  width: 100%;
  height: 100%;
}

.year-name {
  font-size: 30rpx;
  font-family: PingFang SC;
  font-weight: bold;
  color: #ffffff;
  line-height: 42rpx;
}

.year-names {
  font-size: 24rpx;
  font-family: PingFang SC;
  font-weight: bold;
  color: #ffffff;
  line-height: 42rpx;
}

.address-icon {
  width: 20rpx;
  height: 29rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.address-icon image {
  width: 100%;
  height: 100%;
}

.address-name {
  font-size: 24rpx;
  font-family: PingFang SC;
  font-weight: bold;
  color: #ffffff;
  line-height: 42rpx;
}

.swiper {
  border-radius: 8px;
}

.line_through {
  text-decoration: line-through;
  font-weight: normal;
  color: #aaa;
  font-size: 22rpx;
}
.xia_a {
  white-space: nowrap;
  position: absolute;
  margin-left: -6rpx;
  margin-bottom: -10rpx;
  text-decoration: line-through;
  -webkit-transform: scale(0.75) !important;
  transform: scale(0.75) !important;
}

.xia_b {
  white-space: nowrap;
  position: absolute;
  // margin-top: -30rpx;
  margin-left: -6rpx;
  margin-bottom: -10rpx;
  // margin-right: 20rpx;
  text-decoration: line-through;
  // font-size: 4rpx;
  transform: scale(0.8) !important;
}
.xia_as {
  white-space: nowrap;
  position: absolute;
  margin-left: -6rpx;
  margin-bottom: -10rpx;
  text-decoration: line-through;
  -webkit-transform: scale(0.82) !important;
  transform: scale(0.82) !important;
}

.xia_bs {
  white-space: nowrap;
  position: absolute;
  // margin-top: -30rpx;
  margin-left: -6rpx;
  margin-bottom: -10rpx;
  // margin-right: 20rpx;
  text-decoration: line-through;
  // font-size: 4rpx;
  transform: scale(0.9) !important;
}
.teshus{
  font-size: 26rpx;
  margin-top: 4rpx;
}
.tops_10{
  margin-top:2rpx;
}
.textnormal{
  text-decoration:none!important;
  font-size: 26rpx;
}
.item-img uni-image{
  width: 100%;
  height: 100%!important;
}
::v-deep .uni-page-head{
  background: #fafafa!important;
}
::v-deep .uni-scroll-view::-webkit-scrollbar{
  height: 0!important;
}
::v-deep .uni-scroll-view::-webkit-scrollbar-thumb {
  border-radius: 5px;
  -webkit-box-shadow:none!important;
}
.search-content{
  width: 100%;
  display: flex;
  align-items: center;
}
.search-right{
  display: flex;
  align-items: center;
  justify-content: center;
}
::v-deep .u-input__input{
  min-height:37px!important; ;
}
.input-search{
 height: 40px!important;
  border: 2rpx solid transparent!important;
  margin-left:  40rpx;
  width: 78%;
  background: #ffffff;
}
.yellowborder{
  border: 2rpx solid $uni-color-primary!important;
}
.search-right{
  height: 40px;
  padding: 10rpx 20rpx;
  background:  $uni-color-primary;
  color: #fff;
}
::v-deep .u-input__right-icon{
  height: 40px!important;
}
::v-deep .uni-input-input{
  padding: 0 14rpx!important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 96%;
}
::v-deep .uni-input-placeholder{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.search-history{
  display: flex;
  flex-direction: column;
  padding: 0 20rpx 0;
  margin-top: 100rpx;
  .search-history-title{
    font-size: 30rpx;
    color:#111;
    height: 40px;
    display: flex;
    align-items: center;
    font-weight: bold;
  }
  .search-history-content{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    .search-history-item{
      margin-top: 20rpx;
      margin-right: 34rpx;
      padding: 16rpx 16rpx;
      background: #FFFFFF;
      border-radius: 5px;
      position: relative;
      .closed{
        position: absolute;
        top: -4rpx;
        right: -6rpx;
        width: 26rpx;
        height: 26rpx;
        border-radius: 50%;
        background: #ffffff;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 10;
        image{
          width: 100%;
          height: 100%;
        }
      }
    }
  }
  .lookmore{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20rpx;
    .lookmores{
      color: #AAAAAA;
      height: 100%;
      display: flex;
      align-items: center;
      margin-right: 20rpx;
    }
    .icon_arrow{
      width: 28rpx;
      height: 28rpx;
      margin-top: -6rpx;
      image{
        width: 100%;
        height: 100%;
      }
    }
    .rolate180{
      transform: rotate(180deg);
    }
  }
}
::v-deep uni-page {
  background: #fafafa;
}
</style>
